<template>
  <el-dialog
    title="基础设置"
    :visible.sync="visible"
    :before-close="handleClose"
    width="60%"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="form"
      label-width="150px"
      style="max-height: 500px; overflow-y: scroll;padding-right: 20px;"
    >
      <el-form-item label="商品名称">
        <div style="width:80%;">{{ form.name }}</div>
      </el-form-item>
      <el-form-item label="活动总库存">
        <div style="width:80%;">{{ form.goods_stock }}</div>
      </el-form-item>
      <el-form-item
        label="活动库存"
        prop="stock"
        :rules="[{ required: true, message: ' 活动库存不能为空' }]"
      >
        <el-input-number
          v-model="form.stock"
          :precision="0"
          :step="1"
          :min="0"
          :max="form.goods_stock ? form.goods_stock : 100000000000000"
          :controls="false"
          size="medium"
        ></el-input-number>

        <span style="color: rgb(255, 78, 78);font-size:12px;"
          >&nbsp;&nbsp;(活动库存不能大于总库存)</span
        >
      </el-form-item>

      <el-form-item
        label="砍价规格"
        prop="unite_price"
        :rules="{ required: true, message: '请输入拼团价格', trigger: 'blur' }"
      >
        <Table :data="tableData">
          <!--  :span-method='objectSpanMethod' -->
          <el-table-column
            v-if="skuType[0]"
            prop="sku_type_name[0]"
            :label="skuType[0]"
            width="180"
          >
          </el-table-column>
          <el-table-column
            v-if="skuType[1]"
            prop="sku_type_name[1]"
            :label="skuType[1]"
            width="180"
          >
          </el-table-column>
          <el-table-column
            v-if="skuType[2]"
            prop="sku_type_name[2]"
            :label="skuType[2]"
            width="180"
          >
          </el-table-column>
          <el-table-column label="是否参加">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="商品库存" property="sku_stock">
          </el-table-column>
          <el-table-column label="活动参加库存">
            <template slot-scope="scope">
              <el-input-number
                v-model.lazy="scope.row.join_stock"
                size="medium"
                style="width:100%;"
                :precision="0"
                :min="1"
                :max="scope.row.sku_stock"
                placeholder="请输入参加库存"
                :controls="false"
                @blur="
                  // eslint-disable-next-line vue/camelcase
                  !scope.row.join_stock ? (scope.row.join_stock = 1) : ''
                "
              ></el-input-number>
            </template>
          </el-table-column>
          <el-table-column label="销售价格" property="sku_price">
          </el-table-column>
          <!-- <el-table-column label="拼团价格">
            <template slot-scope="scope">
              <el-input-number
                v-model.lazy="scope.row.join_price"
                size="medium"
                style="width:100%;"
                :precision="2"
                placeholder="请输入拼团价格"
                :min="1"
                :max="scope.row.sku_price"
                :controls="false"
                @blur="
                  // eslint-disable-next-line vue/camelcase
                  !scope.row.join_price ? (scope.row.join_price = 1) : ''
                "
              ></el-input-number>
            </template>
          </el-table-column> -->
        </Table>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { COUPON_LIST } from "@/service/shop";
import { ADD_BARGAIN_CONFIG, GETGOODSSKU } from "../../service";

export default {
  props: {
    assembleId: {
      type: Number,
      default: -1
    },
    typeP: {
      type: String,
      default: ""
    },
    visible: {
      type: Boolean,
      default: false
    },
    datas: {
      type: Object,
      default: () => {}
    },
    listType: {
      type: String,
      default: ""
    },
    listDataAll: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        name: "",
        goods_id: 0,
        goods_stock: "",
        stock: 0,
        start_nums: 0,
        open_limit: 0,
        join_limit: 0,
        buy_limit: 0,
        sort: 0,
        unite_price: 0,
        need_nums: 0,
        goods_id_arr: "",
        assemble_success: false,
        assemble_success_value: "",
        assemble_success_num: 0,
        assemble_fail: false,
        assemble_fail_value: "",
        assemble_fail_num: 0
      },
      optionsY: [],
      tableData: [],
      skuType: [],
      setLock: ""
    };
  },
  watch: {
    visible(v) {
      if (v) {
        if (this.listType === "add") {
          this.add(this.datas);
        } else {
          this.edit(this.datas);
        }
      }
    }
  },
  created() {
    // this.getCoupon();
  },
  methods: {
    handleClose() {
      this.setLock = "";
      this.$emit("outDialog", false);
    },
    init() {
      this.form = {
        name: "",
        goods_id: "",
        goods_stock: "",
        stock: 0,
        start_nums: 0,
        open_limit: 0,
        join_limit: 0,
        buy_limit: 0,
        sort: 0,
        unite_price: 0,
        need_nums: 0,
        goods_id_arr: "",
        assemble_success: false,
        assemble_success_value: "",
        assemble_success_num: 0,
        assemble_fail: false,
        assemble_fail_value: "",
        assemble_fail_num: 0
      };
    },
    async add(e) {
      this.init();
      this.form.name = e.goods_name;
      this.form.goods_id = e.goods_id;
      this.form.goods_stock = e.goods_stock;
      this.getSKU(e.goods_id);
    },
    edit(e) {
      this.form.name = e.goods_name;
      this.form.goods_id = e.goods_id;
      this.form.stock = e.stock;
      this.form.goods_stock = e.goods_stock;
      this.getSKU(e.goods_id, "edit");
    },
    async getSKU(id) {
      this.tableData = [];
      this.skuType = [];
      await GETGOODSSKU({
        activity_id: this.assembleId,
        activity_type: 4,
        goods_id: id
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          data.forEach(ele => {
            ele.status = ele.status === 1;
            ele.sku_price = parseFloat(ele.sku_price);
            ele.sku_type_name = ele.sku_type_name.split(",");
          });
          this.tableData = data;
          this.skuType = data[0].attr_names.split(",");
        } else {
          this.$message.error(msg);
          this.$emit("outDialog", false);
        }
      });
    },
    async submit() {
      let arr = [];
      let num = 0;

      this.tableData.forEach(ele => {
        num += ele.join_stock;
        arr.push({
          uniqueKey: ele.uniqueKey,
          status: ele.status ? 1 : 0,
          join_price: ele.join_price,
          join_stock: ele.join_stock
        });
      });
      if (num > this.form.stock) {
        this.$message.error("参加活动的规格库存总数不能大于活动库存总数！");
        return;
      }
      if (num === 0) {
        this.$message.error("参加活动的规格库存总数必须大于1！");
        return;
      }

      let prams = {
        bargain_id: this.assembleId,
        stock: this.form.stock,
        goods_id: this.form.goods_id,
        goods_id_json: JSON.stringify(arr),
        type: this.listType
      };
      await this.$refs["form"].validate(valid => {
        if (valid) {
          ADD_BARGAIN_CONFIG(prams).then(({ code, msg }) => {
            if (code === 200) {
              this.$emit("outDialog", false, "submit");
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        } else {
          return false;
        }
      });
    },
    async getCoupon() {
      await COUPON_LIST({ type: 1, page: 1, pageshow: 10000 }).then(
        ({ code, data }) => {
          if (code === 200) {
            this.optionsY = data.list;
          }
        }
      );
    }
  }
};
</script>
